<template>
  <el-dialog v-model="dialogVisible" title="导出成功" width="600">
    <div>
      <span>导出路径：</span>
      <el-input v-model="filePath" disabled style="width: 400px">
        <template #append>
          <el-button :icon="DocumentCopy" title="复制" @click="copyPath" />
        </template>
      </el-input>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false" type="primary">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { DocumentCopy } from '@element-plus/icons'
import { ref } from 'vue'

const dialogVisible = ref(false)

const filePath = ref('')

const open = (path) => {
  dialogVisible.value = true
  filePath.value = path
}

const copyPath = () => {
  try {
    navigator.clipboard.writeText(filePath.value)
    console.log('Copying to clipboard was successful!')
  } catch (err) {
    console.error('Async: Could not copy text: ', err)
  }
}

defineExpose({
  open
})
</script>
